<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="ID" width="300" />
    <el-table-column prop="username" label="用户名"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button  @click="$router.push(`/newadmin/${scope.row.id}`)">编辑</el-button>
        <el-popconfirm title="确定删除此管理员吗?" @confirm="handleDelete(scope.row)" confirm-button-text="是" cancel-button-text="否">
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {reqAdminShowList ,reqAdminDelete}from '../../../api/index';
export default {
    name:'AdminList',
    data(){
      return {
        tableData:[]
      }
    },
    methods:{
      //删除管理员信息
      async handleDelete(row){
        let res = await reqAdminDelete(row.id);
        this.showList();
      },
      //显示管理员列表
      async showList(){
        let res = await reqAdminShowList();
        this.tableData = [];
        this.tableData.push(...res.adminsList);
      }
    },
    mounted(){
      this.showList();
    },
    //在组件更新之前调用 showList
    beforeUpdate(){
      this.showList();
    }
}
</script>

<style>

</style>